<script setup lang="tsx">
/**
 * 可拖拽拉伸的卡片
 */
import { ref } from 'vue'
import { useAbsoluteDraggable } from '@sat/shared-hooks'
import type { PropType } from 'vue'
import type { Position } from '@vueuse/core'

defineOptions({
  name: 'DragResizeCard',
})

const props = defineProps({
  initialPosition: {
    type: Object as PropType<Position>,
    default() {
      return { x: 0, y: 0 }
    },
  },
  showHeader: {
    type: Boolean,
    default: () => true,
  },
  header: {
    type: String,
    default: () => '',
  },
  bodyStyle: {
    type: Object,
    default: () => {
      return {}
    },
  },
  containerEleId: {
    type: String,
    default: () => '',
  },
  positionType: {
    type: String, //  as PropType<'fixed' | 'absolute'>
    default: () => 'fixed',
  },
})
const CardHeaderRef = ref<HTMLElement | null>(null)

// 一般的拖拽都是针对position为fixed，这里是absolute，需要特殊处理
const { styleComputed, style } = useAbsoluteDraggable(
  CardHeaderRef,
  `#${props.containerEleId}`,
  {
    initialValue: props.initialPosition,
  },
)
</script>

<template>
  <div
    class="drag-resize-card"
    :class="[showHeader ? 'show-header' : '', positionType]"
    :style="positionType == 'absolute' ? styleComputed : style"
  >
    <div
      v-show="showHeader"
      ref="CardHeaderRef"
      class="drag-resize-card__header"
    >
      {{ header }}
      <slot name="header" />
    </div>
    <div class="drag-resize-card__body" :style="bodyStyle">
      <slot />
    </div>
  </div>
</template>

<style lang="less" scoped>
.drag-resize-card {
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  background-color: #fff;
  color: #000;
}

.drag-resize-card.fixed {
  position: fixed;
}

.drag-resize-card.absolute {
  position: absolute;
}

.drag-resize-card:hover,
.@{elNamespace}-card:focus {
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}

.drag-resize-card__header {
  padding: 10px 20px;
  border-bottom: 1px solid #e4e7ed;
  box-sizing: border-box;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: move;
  font-size: 16px;
  font-weight: bold;
}

.drag-resize-card__body {
  padding: 20px;
  overflow: hidden;
  resize: both;
  max-width: 100vw;
  max-height: 100vh;
  min-width: 30px;
  min-height: 30px;
}

.drag-resize-card.show-header {
  .drag-resize-card__body {
    height: calc(100% - 50px);
  }
}
</style>
